<template>
  <div class="container">范方方
    <el-card>
      <search-tools @clear="clear" @search="search" />
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="1"> </el-tab-pane>
        <el-tab-pane label="待审核" name="2"> </el-tab-pane>
        <el-tab-pane label="已审核" name="3"> </el-tab-pane>
        <el-tab-pane label="已拒绝" name="4"> </el-tab-pane>
        <!-- 警告 -->
        <el-alert type="info" :closable="false" show-icon>
          <template slot="title">数据一共{{ counts }}条</template>
        </el-alert>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%" stripe>
          <el-table-column prop="number" label="试题编号" width="220">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="100">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="100">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="80" :formatter="formatQuestion">
          </el-table-column>
          <el-table-column prop="question" label="题干" width="160">
            <template v-slot="{ row }"><span v-html="row.question"></span></template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="100">
            <template v-slot="{ row }">
              {{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="80" :formatter="formatDifficulty">
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="100">
          </el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="100" :formatter="formatChkState">
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="100">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="100">
          </el-table-column>
          <el-table-column prop="publishState" label="发布状态" width="100" :formatter="formatPublishState">
          </el-table-column>
          <el-table-column label="操作" width="180" fixed="right">
            <template slot-scope="{ row }">
              <el-row type="flex" justify="space-around">
                <el-button type="text" size="small" @click="showViewDialog(row)">预览</el-button>
                <el-button type="text" size="small" :disabled="row.chkState === 0 ? false : true"
                  @click="showCheckDialog(row)">审核</el-button>
                <el-button type="text" size="small" :disabled="row.publishState === 1 ? true : false">修改</el-button>
                <el-button type="text" size="small" @click="publishState(row)" ref="updown">
                  {{ row.publishState === 1 ? "下架" : "上架" }}</el-button>
                <el-button type="text" size="small" @click="del(row)" :disabled="row.publishState === 1 ? true : false">
                  删除</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="end">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="query.page" :page-sizes="[10, 15, 20, 30]" :page-size="query.pagesize"
            layout="total, sizes, prev, pager, next, jumper" :total="counts">
          </el-pagination>
        </el-row>
      </el-tabs>
    </el-card>
    <questions-preview :show-dialog.sync="showDialog" :question-views="questionViews" />
    <!-- 审核对话框 -->
    <el-dialog title="题目审核" :visible.sync="checkDialogVisible" width="30%">
      <el-form ref="checkFormRef" :model="checkForm">
        <el-form-item>
          <el-radio-group v-model="checkForm.chkState">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-input type="textarea" placeholder="请输入审核意见" v-model="checkForm.chkRemarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkQuestion">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import searchTools from '../components/search-tools.vue'
import {
  choice,
  detail,
  remove,
  choicePublish,
  choiceCheck
} from '../../api/hmmm/questions'
import {
  questionType,
  difficulty,
  chkType,
  publishType
} from '../../api/hmmm/constants'
import QuestionsPreview from '../components/questions-preview.vue'

export default {
  components: { searchTools, QuestionsPreview },
  data () {
    return {
      // tab 标签栏激活项
      activeName: '1',
      // 精选题库列表数据
      tableData: [],
      // 数据总条数
      counts: 0,
      // 精选题库请求参数
      query: {
        page: 1,
        pagesize: 10
      },
      // 预览对话框的显示与隐藏
      showDialog: false,
      questionViews: {},
      // 审核对话框的显示与隐藏
      checkDialogVisible: false,
      // 审核表单数据
      checkForm: {
        id: 0,
        chkState: 1,
        chkRemarks: ''
      }
    }
  },
  created () {
    this.getList()
  },
  watch: {
    counts () {
      if (this.counts === (this.query.page - 1) * this.query.pagesize && this.counts !== 0) { // 这一行是关键代码，倍数关系
        this.query.page -= 1
        this.getList()// 获取表格数据的方法
      }
    }
  },
  methods: {
    // 点击清除搜索表单，重新获取表格数据
    clear () {
      this.getList()
    },
    // 点击搜索，接收子组件传来的参数发请求
    async search (val) {
      console.log(val)
      const { data: res } = await choice({ ...this.query, ...val })
      console.log(res)
      this.tableData = res.items
      this.counts = res.counts
    },
    // 获取组题列表
    async getList () {
      this.updateList(this.query)
    },
    // 监听分页条页码改变事件 并重新拉取数据
    handleCurrentChange (newPage) {
      // newPage是当前点击的页码
      this.query.page = newPage // 将当前页码赋值给当前的最新页码
      this.getList()
    },
    // 监听分页条每页条数改变事件
    handleSizeChange (newSize) {
      this.query.pagesize = newSize // 将当前每页条数赋值给当前的最新每页条数
      this.getList()
    },
    // 格式化题型
    formatQuestion (row, column, cellValue, index) {
      // 要去找单元格内容所对应的值
      const obj = questionType.find((item) => item.value + '' === cellValue)
      return obj ? obj.label : '未知'
    },
    // 格式化难度
    formatDifficulty (row, column, cellValue, index) {
      // 要去找单元格内容所对应的值
      const obj = difficulty.find((item) => item.value + '' === cellValue)
      return obj ? obj.label : '未知'
    },
    // 格式化审核状态
    formatChkState (row, column, cellValue, index) {
      // 要去找单元格内容所对应的值
      const obj = chkType.find((item) => item.value === cellValue)
      return obj ? obj.label : '未知'
    },
    // 格式化发布状态
    formatPublishState (row, column, cellValue, index) {
      // 要去找单元格内容所对应的值
      const obj = publishType.find((item) => item.value === cellValue)
      return obj ? obj.label : '未知'
    },
    // 点击显示预览题目对话框
    async showViewDialog (row) {
      const { data: res } = await detail(row)
      console.log(res)
      this.questionViews = res
      this.showDialog = true
    },
    // 审核题目对话框
    showCheckDialog (row) {
      this.checkForm.id = row.id
      this.checkDialogVisible = true
    },
    // 提交审核
    async checkQuestion () {
      await choiceCheck(this.checkForm)
      this.checkDialogVisible = false
      this.getList()
    },
    // 点击删除精选题目
    del (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(row) // 发请求
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 点击上架/下架
    publishState (row) {
      const text = row.publishState === 1 ? '下架' : '上架'
      this.$confirm(`此操作将${text}该题目, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          row.publishState = row.publishState !== 1 ? 1 : 0
          await choicePublish(row) // 发请求
          // this.getList();
          this.$message({
            type: 'success',
            message: `${text}成功!`
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: `已取消${text}`
          })
        })
    },
    // 监听 tab 标签栏点击事件，根据审核状态 chkState 的值，发起请求获取不同的数据渲染表格
    handleClick () {
      if (this.activeName === '2') {
        this.updateList({ ...this.query, chkState: 0 })
      } else if (this.activeName === '3') {
        this.updateList({ ...this.query, chkState: 1 })
      } else if (this.activeName === '4') {
        this.updateList({ ...this.query, chkState: 2 })
      } else {
        this.getList()
      }
    },
    // 封装传入不同的参数获取表格数据
    async updateList (obj) {
      const { data: res } = await choice(obj)
      this.tableData = res.items
      this.counts = res.counts
    }
  },
  computed: {}
}
</script>

<style scoped lang='less'>
.container {
  padding: 10px;
}
.el-table {
  margin: 15px 0;
}
</style>
